<script>
import {ref, defineComponent, inject} from 'vue'
import vx from '@/assets/picture/icon/微信.png'
import wb from '@/assets/picture/icon/微博.png'
import dy from '@/assets/picture/icon/抖音.png'
import ls from '@/assets/picture/icon/脸书.png'
export default defineComponent({
  name: "footer-communal",
  setup(){
    const {toPage} = inject("toPage")
    //页脚标签数据
    const liData = [
      {title:'关于我们',lis:["联系我们", {text:"关于我们",e:()=>{toPage('teams')}},"最新功能","帮助中心"]},
      {title:'探索',lis:["加入我们","讨论社区","个人笔记"]},
      {title:'服务',lis:["隐私条款","私有化部署","使用条款","申请开票","产品下载"]},
      {title:'关注',lis:["微信公众号","微博","抖音","脸书"]},
        {title:'下载',lis:["Android","iOS","windows","Linux"]},
      {title:'其他',lis:["常见问题","意见反馈","安全中心"]},
        {title:'友情链接',lis:["百度","阿里","腾讯","京东"]},
      {title:'致谢',lis:["naive-ui",'vue3','vite','vue-router']}

    ]
    const imgUrl = [
      {src : '/src/assets/picture/icon/微信.png'},
      {src : '/src/assets/picture/icon/微博.png'},
      {src : '/src/assets/picture/icon/抖音.png'},
      {src : '/src/assets/picture/icon/脸书.png'}
    ]
    return{
      uls: ref(liData),
      imgUrl: ref(imgUrl)
    }
  }
})

</script>

<template>
  <n-layout-footer class="core footer">
    <n-flex justify="space-around">
      <n-ul v-for="(item, index) in uls" :key="index">
        <n-li>{{item.title}}</n-li>
        <n-li v-for="(i, ix) in item.lis" :key="ix">
          <n-button size="small" text @click="i?.e">{{i.text?i.text:i}}</n-button>
        </n-li>
      </n-ul>
      <n-space style="margin-left: 2.1rem" vertical>
        <n-h3>联系我们</n-h3>
        <n-space justify="space-evenly">
          <n-image v-for="(item, index) in imgUrl"
                   :key="index"
                   preview-disabled
                   width="27"
                   :src="item.src"/>
        </n-space>
        <n-h3 style="margin-top: 1.5rem">意见邮箱</n-h3>
        <n-space>
          <n-input disabled type="text" placeholder="3411708228@qq.com">
            <template #prefix>
              邮箱：
            </template>
          </n-input>
<!--          <n-button color="#7eb38a">点击发送</n-button>-->
        </n-space>
      </n-space>
    </n-flex>
    <n-divider>@2023-2024 Linter</n-divider>
    <n-space justify="end"><n-text>授权机关: 滇ICP备 2023007484号</n-text></n-space>
  </n-layout-footer>
</template>

<style lang="scss" scoped>
.footer{
  margin-top: 1rem;
  padding-top: 1rem;
  color: #f2f2f2;
  ul {
    li:first-child {
      font-weight: bold;
    }
  }
}
</style>
